<template>
  <div class="buggy-component">
    <h3>这是一个会产生错误的组件</h3>
    <p>点击下面的按钮会触发不同类型的错误：</p>
    
    <div class="button-group">
      <button @click="throwError" class="error-btn">
        抛出运行时错误
      </button>
      
      <button @click="accessUndefined" class="error-btn">
        访问未定义属性
      </button>
      
      <button @click="asyncError" class="error-btn">
        异步错误
      </button>
      
      <button @click="renderError" class="error-btn">
        渲染错误
      </button>
    </div>

    <div v-if="shouldRenderBroken">
      {{ brokenData.nonExistent.property }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const shouldRenderBroken = ref(false)
const brokenData = ref<any>(null)

// 直接抛出错误
const throwError = () => {
  throw new Error('这是一个故意触发的运行时错误！')
}

// 访问未定义的属性
const accessUndefined = () => {
  const obj: any = null
  console.log(obj.someProperty.nested) // 这会抛出错误
}

// 异步错误
const asyncError = async () => {
  setTimeout(() => {
    throw new Error('这是一个异步错误！')
  }, 100)
}

// 渲染错误
const renderError = () => {
  shouldRenderBroken.value = true
}
</script>

<style scoped>
.buggy-component {
  padding: 20px;
  border: 2px dashed #ff6b6b;
  border-radius: 8px;
  margin: 20px 0;
  background-color: #fff5f5;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.error-btn {
  padding: 8px 16px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.error-btn:hover {
  background-color: #ff5252;
}

.error-btn:active {
  transform: translateY(1px);
}
</style>